<template>
  <div class="info-modify">
    <div class="form">
      <el-form :model="form" label-width="auto">
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3005/user/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :limit="1"
          >
            <div style="display: flex; justify-content: center">
              <img
                v-if="form.headPic"
                :src="`http://localhost:3005/${form.headPic}`"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </div>
          </el-upload>
          <!-- <el-input v-model="form.headPic"></el-input> -->
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" disabled></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <div class="captcha">
            <el-input v-model="form.captcha"></el-input>
            <el-button
              :loading="isLoading"
              type="primary"
              class="send"
              @click="sendCaptcha"
              :disabled="isCounting"
            >
              {{ isCounting ? `重新发送(${count}s)` : '发送验证码' }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="onSubmit">修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getUserInfo, updateInfoCaptcha, updateInfo } from '@/api/user'
import { ElMessage } from 'element-plus'

const form = reactive({
  headPic: '',
  nickName: '',
  phoneNumber: '',
  email: '',
  captcha: '',
})
const count = ref(30) // 倒计时秒数
const isCounting = ref(false) // 是否在倒计时中
const isLoading = ref(false)

const queryInfo = async () => {
  const res = await getUserInfo()
  const { data } = res.data
  if (res.status === 200 || res.status === 201) {
    form.headPic = data.headPic
    form.nickName = data.nickName
    form.phoneNumber = data.phoneNumber
    form.email = data.email
  }
}

const sendCaptcha = async () => {
  isLoading.value = true
  const res = await updateInfoCaptcha(form.email)
  if (res.status === 200 || res.status === 201) {
    ElMessage.success('发送成功')
    isLoading.value = false
  } else {
    ElMessage.error(res.data.data || '系统繁忙，请稍后再试')
  }
  if (isCounting.value) return

  isCounting.value = true
  count.value = 30

  const timer = setInterval(() => {
    count.value--
    if (count.value <= 0) {
      clearInterval(timer)
      isCounting.value = false
    }
  }, 1000)
}
const handleAvatarSuccess = (e) => {
  form.headPic = e.data
  ElMessage.success('上传成功')
}

const onSubmit = async () => {
  const res = await updateInfo({
    ...form,
  })
  if (res.status === 200 || res.status === 201) {
    ElMessage.success('修改成功')
    queryInfo()
    form.captcha = ''
  } else {
    ElMessage.error(res.data.data || '系统繁忙，请稍后再试')
  }
}
onMounted(() => {
  queryInfo()
})
</script>

<style lang="scss" scoped>
.info-modify {
  margin-left: 50px;
  margin-top: 50px;
  .form {
    width: 400px;
    margin: 30px;
    box-shadow: 0 0 10px #ccc;
    padding: 20px;
    .captcha {
      display: flex;
      justify-content: space-between;
      .send {
        margin-left: 20px;
      }
    }
    .avatar-uploader .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
}
</style>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;

  text-align: center;
}
</style>
